<template>
  <div>
    <el-card class="box-card">
      <!-- 顶部搜索框 -->
      <div class="top">
        <el-form ref="form" :model="form" :rules="rules">
          <el-descriptions :colon="false">
            <el-descriptions-item label="司机帐号:">
              <el-form-item prop="account">
                <el-input v-model="form.account" placeholder="请输入司机帐号" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="司机姓名:">
              <el-form-item prop="name">
                <el-input v-model="form.name" placeholder="请输入司机姓名" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="司机手机号:">
              <el-form-item prop="phone">
                <el-input v-model="form.phone" placeholder="请输入司机手机号" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="所属机构:" label-class-name="organ">
              <el-form-item prop="agentId">
                <el-select
                  v-model="form.agentId"
                  placeholder="请选择所属机构"
                  style="width:100%"
                  clearable
                >
                  <el-tree
                    node-key="id"
                    :data="treeData"
                    class="add_tree"
                    :props="defaultProps"
                    :expand-on-click-node="false"
                    :check-on-click-node="true"
                  >
                    <span slot-scope="{data}" class="custom-tree-node">
                      <el-option
                        style="padding: 0"
                        :label="data.name"
                        :value="data.id"
                      /></span></el-tree>
                </el-select>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="btnGroup">
              <el-button type="primary" @click="btnSearch">搜索</el-button>
              <el-button @click="btnReset">重置</el-button>
            </el-descriptions-item>
          </el-descriptions>
        </el-form>
      </div>

      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" width="180" label="序号" />
        <el-table-column prop="account" label="司机账号" width="180" />
        <el-table-column prop="name" label="司机姓名" />
        <el-table-column prop="mobile" label="司机电话" />
        <el-table-column prop="truck.licensePlate" label="关联车辆" />
        <el-table-column prop="agency.name" label="所属机构" />
        <el-table-column prop="workStatus" label="工作状态">
          <template v-slot="scoped">
            <span>{{ scoped.row.workStatus?'上班':'休息' }}</span>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作">
          <template v-slot="{row}">
            <el-button
              type="text"
              size="small"
              @click.native.prevent="details(row)"
            >
              查看
            </el-button>
            <span style="color: #ccccccba; margin-left: 5px; margin-right: 5px;">|</span>
            <el-button
              type="text"
              size="small"
              @click.native.prevent="vehicle(row.userId)"
            >
              配置车辆
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <el-pagination
        :current-page="tableParams.page * 1"
        :page-sizes="[10,20,50,100]"
        :page-size="tableParams.pageSize * 1"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- 放置弹层 -->
  </div>
</template>

<script>
import { getChauffeur, getOrganization } from '@/api/employee'

export default {
  data() {
    return {
    // 表格数据
      tableData: [],
      total: 0, // 总数据
      // 表格数据请求参数
      tableParams: {
        page: 1,
        pageSize: 10
      },
      // 树形控件数据
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      treeData: [],
      label: '',
      selectOption: '',
      form: {
        account: '',
        agentId: -1 && '',
        name: '',
        phone: ''
      },
      rules: {
        account: [],
        agentId: [],
        name: [],
        phone: []
      }
    }
  },
  created() {
    this.getList()
    this.getSelect()
  },
  methods: {
    // 获取表格数据
    async getList() {
      const result = await getChauffeur(this.tableParams)
      this.tableData = result.data.items
      this.total = +result.data.counts
      console.log(result)
    },
    // 分页器
    handleSizeChange(val) {
      this.tableParams.pageSize = val + ''
      this.getList()
    },
    handleCurrentChange(val) {
      this.tableParams.page = val + ''
      this.getList()
    },
    // 获取树状机构信息
    async getSelect() {
      const result = await getOrganization()
      this.treeData = JSON.parse(result.data)
      // console.log(result)
    },
    // 搜索
    async btnSearch() {
      this.tableParams = { ...this.tableParams, ...this.form
      }
      // console.log(this.tableParams)
      await this.getList(this.tableParams)
      this.$message.success('搜索成功')
      delete this.tableParams.name
    },
    // 重置
    btnReset() {
      this.$refs.form.resetFields()
      this.pageParams = {
        page: 1,
        pageSize: 10
      }
      this.getList()
    },
    // 查看详情
    details(row) {
      // console.log(row)
      this.$router.push(`/employee/chauffeur/driver/${row.userId}`)
    },
    handleChange(value) {
      console.log(value)
    }
  }
}
</script>

<style scoped>
.top,
.bottom
{
 margin: 20px;
 padding: 30px;
}

.top ::v-deep .el-input {
 width: 380px;
 height: 40px;
}

.top ::v-deep .el-descriptions-item__container {
 line-height: 40px;
}

.top ::v-deep .organ {
 padding-left: 14px;
}

.top ::v-deep .btnGroup {
 margin-right: 0;
}

.top ::v-deep .el-descriptions-item__container {
 height: 45px;
}

</style>
